<template>
  <div id="app">

    <div id="nav" v-show="isNav">
      
        <router-link to="/home" >
          <div class=" iconfont icon-shouye" >
            
          </div>
          <span class="font">首页</span>
        </router-link>
        
        <router-link to="/classify">
            <div class="iconfont icon-fenlei1">
            </div>
            <span class="font">分类</span>
        </router-link>
        <!-- @click.native="car" -->
        <router-link to="/cart" >
            <div class=" iconfont icon-gouwuche3"></div>            
            <span class="font" >购物车</span>
        </router-link>
        
        <router-link to="/my" >
            <div class=" iconfont icon-wode1"></div>
            <span class="font">我的</span>
        </router-link>
     
    </div>

    <keep-alive include="search">
      <router-view/>
    </keep-alive>
        
   
   

  </div>
</template>

<script>
import { Toast } from 'vant';

export default {
  data(){
    return{
      isNav:false
    }
  },
    methods: {
      // car(){
      //     // console.log('111'+this.token) 
      //      if(!this.token){
      //       Toast('请登录')
      //       this.$router.replace('/login')
      //       return false
      //     }
          

      // }
    },

    activated() {
      const token=localStorage.getItem('token')
      this.token=token

    },


    mounted() {
      // console.log(this.$route.name) 
      const name=this.$route.name
      const token=localStorage.getItem('token')
      this.token=token

      // console.log('我是'+ token) 
     

      if(/home|classify|my|cart/.test(name)){
          this.isNav=true
      }else{
           this.isNav=false
      }

    },
    watch: {
			$route(to,from){
				// 跳转路由的时候，只在首页、商品和关于这几个路由中显示底部的导航
				this.isNav = /home|classify|my|cart/.test(to.name)
			}
		}
}
</script>



<style lang="scss">
	// 引入字体图标
	@import url(./assets/font/iconfont.css);


*{
  padding: 0;
  margin: 0;
}
body{
  background-color: #fafafa;
}

#app {
   
  #nav {
    
    width: 100vw;
    padding: 0.1rem 0;
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: space-around;
    background-color: white;
    z-index: 100;
  
      
      a {
        justify-content: center;
        text-decoration: none;
        color: black;

          .iconfont{
              font-size: 0.4rem;
          }
          .font{
            font-size: 0.2rem
          }

        &.router-link-exact-active {
				  color: #3ac149;
			
			  }


      }


    }
  
  
}
  





</style>
